<template>
  <div>
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-aside class="content-header">

          </el-aside>
          <el-main class="info-main">
            <el-row>
              <el-col style="height: 100%;" :span="18" :offset="4">
                <el-form ref="form" :rules="rules" :model="basicSetting" label-width="200px">
                  <div class="classify-icon"><i class="el-icon-collection-tag"></i>常规设置</div>
                  <el-form-item label="热门搜索关键字：" prop="hotKeyword">
                    <el-input maxLength=255 class="input-width" v-model="basicSetting.hotKeyword"></el-input>
                    <div class="show-info">热门搜索关键字,请用半角逗号(,)分隔多个关键字</div>
                  </el-form-item>
                  <el-form-item label="时间格式：" prop="webDate">
                    <el-date-picker
                            v-model="basicSetting.webDate"
                            type="datetime"
                            placeholder="Y-m-d HH:i:s">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item maxLength=255 label="货币格式：" prop="currency">
                    <el-input class="input-width" placeholder="<em>￥</em>%s" v-model="basicSetting.currency"></el-input>
                    <div class="show-info">显示商品价格的格式，%s将被替换为相应的价格数字。</div>
                  </el-form-item>
                  <el-form-item prop="imgNum" label="退货上传图片凭证：">
                    <el-input maxLength=255 class="input-width" placeholder="6" v-model="basicSetting.imgNum"></el-input>
                    <div class="show-info">设置退换货上传图片凭证数量限制</div>
                  </el-form-item>
                  <el-form-item label="商品评价是否需要审核：">
                    <el-radio-group v-model="basicSetting.isAudit">
                      <el-radio label="是"></el-radio>
                      <el-radio label="否"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="站点统计代码：" >
                    <el-input  class="input-width"
                               maxLength=255
                              type="textarea"
                              :rows="5"
                              placeholder=""
                              v-model="basicSetting.statistical">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="hotKeyword" label="商品默认图片：">
                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :http-request="modeUpload"
                            :on-success="handleAvatarSuccess"
                            :limit="1"
                            :file-list="fileList"
                            :before-upload="beforeAvatarUpload"
                            list-type="picture">
                      <el-button style="margin-left: 10px;" size="small" icon="el-icon-upload" @click="submitUpload">选择上传文件</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png格式文件，文件不能超过50kb</div>
                    </el-upload>
                  </el-form-item>
                  <div class="classify-icon"><i class="el-icon-collection-tag"></i>购物设置</div>
                  <el-form-item prop="minMoney" label="最小购物金额：">
                    <el-input maxLength=255 placeholder="0" class="input-width" v-model="basicSetting.minMoney"></el-input>
                    <div class="show-info">达到此购物金额，才能提交订单。</div>
                  </el-form-item>
                  <el-form-item label="是否开启自动确认收货：">
                    <el-radio-group v-model="basicSetting.isAutoGoods">
                      <el-radio label="关闭"></el-radio>
                      <el-radio label="开启"></el-radio>
                    </el-radio-group>
                    <div class="show-info">确认收货时长请在订单设置中进行设置</div>
                  </el-form-item>
                  <el-form-item label="能否开发票：">
                    <el-radio-group v-model="basicSetting.isInvoice">
                      <el-radio label="能"></el-radio>
                      <el-radio label="不能"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="发票内容选项：" >
                    <!--<el-input readonly="true"-->
                              <!--class="input-width"-->
                              <!--type="textarea"-->
                              <!--:rows="5"-->
                              <!--placeholder=""-->
                              <!--v-model="basicSetting.invoiceContent">-->
                    <!--</el-input>-->
                    <div class="content-tab-style">
                      <el-radio v-model="basicSetting.invoiceContent" label="日用品">日用品</el-radio><br/>
                      <el-radio v-model="basicSetting.invoiceContent" label="家居用品">家居用品</el-radio><br/>
                      <el-radio v-model="basicSetting.invoiceContent" label="食品">食品</el-radio><br/>
                      <el-radio v-model="basicSetting.invoiceContent" label="酒">酒/饮料</el-radio>
                    </div>
                    <div class="show-info">客户要求开发票时可以选择的内容。例如：办公用品。每一行代表一个选项。</div>
                  </el-form-item>
                  <el-form-item label="减库存的时机：">
                    <el-radio-group v-model="basicSetting.reductionInventory">
                      <el-radio label="下订单时"></el-radio>
                      <el-radio label="发货时"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="增加销量的时机：">
                    <el-radio-group v-model="basicSetting.addSales">
                      <el-radio label="发货时"></el-radio>
                      <el-radio label="付款时"></el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <div class="classify-icon"><i class="el-icon-collection-tag"></i>备注设置</div>
                  <el-form-item label="修改订单“发票信息”时：">
                    <el-radio-group v-model="basicSetting.updateInvoice">
                      <el-radio label="必须填写备注"></el-radio>
                      <el-radio label="无需填写备注"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="修改订单“收货人信息”时：">
                    <el-radio-group v-model="basicSetting.updateGood">
                      <el-radio label="必须填写备注"></el-radio>
                      <el-radio label="无需填写备注"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="修改订单“商品信息”时：">
                    <el-radio-group v-model="basicSetting.updateGoodInfo">
                      <el-radio label="必须填写备注"></el-radio>
                      <el-radio label="无需填写备注"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="修改订单“费用信息”时：">
                    <el-radio-group v-model="basicSetting.updateCost">
                      <el-radio label="必须填写备注"></el-radio>
                      <el-radio label="无需填写备注"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="关闭订单时：">
                    <el-radio-group v-model="basicSetting.closeOrder">
                      <el-radio label="必须填写备注"></el-radio>
                      <el-radio label="无需填写备注"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="取消订单时：">
                    <el-radio-group v-model="basicSetting.cancelOrder">
                      <el-radio label="必须填写备注"></el-radio>
                      <el-radio label="无需填写备注"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="退货处理时：">
                    <el-radio-group v-model="basicSetting.returnGoods">
                      <el-radio label="必须填写备注"></el-radio>
                      <el-radio label="无需填写备注"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="退货确认收货时：">
                    <el-radio-group v-model="basicSetting.returnGoodsConfirm">
                      <el-radio label="必须填写备注"></el-radio>
                      <el-radio label="无需填写备注"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="退款处理时：">
                    <el-radio-group v-model="basicSetting.returnMoney">
                      <el-radio label="必须填写备注"></el-radio>
                      <el-radio label="无需填写备注"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="修改匠币或成长值时：">
                    <el-radio-group v-model="basicSetting.upddateCurrency">
                      <el-radio label="必须填写备注"></el-radio>
                      <el-radio label="无需填写备注"></el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <div class="classify-icon"><i class="el-icon-collection-tag"></i>用户协议</div>
                  <el-form-item>
                    <editor-bar v-model="basicSetting.userAgreement" :isClear="isClear" @change="change"></editor-bar>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">提交</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
    import goodImgeListApi from "@/api/goods/imagelist";
    import EditorBar from "@/components/wangEnduit";
    export default {
        data() {
            // 验证数字
            var validateNum = (rule, value, callback) => {
                const reg =/^\d*$/;
                if(value==''||value==undefined||value==null){
                    callback();
                }else{
                    if (!reg.test(value)){
                        callback(new Error('请输入正整数'));
                    } else {
                        callback();
                    }
                }
            }
            // 验证货币
            var validateCurrency = (rule, value, callback) => {
                const reg =/^<em>￥<///em>\d*$/;
                if(value==''||value==undefined||value==null){
                    callback();
                }else{
                    if (!reg.test(value)){
                        callback(new Error('请输入正确的货币格式'));
                    } else {
                        callback();
                    }
                }
            }
            return {
                requestUrl:goodImgeListApi.getRequestUrl().defaults.baseURL+'/api-sys/basic-setting/',
                imgUrl:goodImgeListApi.getRequestUrl().defaults.baseURL+"/api-goods/album/",
                basicSetting:{
                    hotKeyword:'',
                    webDate:'',
                    currency:'',
                    imgNum:'',
                    isAudit:'是',
                    statistical:'',
                    minMoney:'',
                    isAutoGoods:'关闭',
                    isInvoice:'能',
                    invoiceContent:'日用品\n家居用品\n食品\n酒/饮料',
                    reductionInventory:'下订单时',
                    addSales:'发货时',
                    updateInvoice:'必须填写备注',
                    updateGood:'必须填写备注',
                    updateGoodInfo:'必须填写备注',
                    updateCost:'必须填写备注',
                    closeOrder:'必须填写备注',
                    cancelOrder:'必须填写备注',
                    returnGoods:'必须填写备注',
                    returnGoodsConfirm:'必须填写备注',
                    returnMoney:'必须填写备注',
                    upddateCurrency:'必须填写备注',
                    userAgreement: "",
                },
                isClear: false,
                rules: {
                    hotKeyword: [
                        {required: true, message: '请输入热门搜索关键字', trigger: 'blur'}
                    ],
                    webDate: [
                        {required: true, message: '请输入时间格式', trigger: 'blur'}
                    ],
                    currency: [
                        {required: true, message: '请输入货币格式', trigger: 'blur'},
                        {validator:validateCurrency,trigger: 'blur'}
                    ],
                    imgNum: [
                        {required: true, message: '请输入退货上传图片凭证', trigger: 'blur'},
                        {validator:validateNum,trigger: 'blur'}
                    ],
                    minMoney:[
                        {required: true, message: '请输入最小购物金额', trigger: 'blur'},
                        {validator:validateNum,trigger: 'blur'}
                    ]
                },
                fileList: [],
                mode: '',
                imageUrl: '',
            }
        },
        components: { EditorBar },
        methods:{
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        if(this.mode=="" && this.fileList.length==0){
                            this.$message.error('请选择商品默认图片');
                            return ;
                        }
                        let param = new FormData(); //创建form对象
                        param.append('file',this.mode);
                        param.append('hotKeyword',this.basicSetting.hotKeyword);
                        param.append('webDate',new Date(this.basicSetting.webDate));
                        param.append('currency',this.basicSetting.currency);
                        param.append('imgNum',this.basicSetting.imgNum);
                        param.append('isAudit',this.basicSetting.isAudit);
                        param.append('statistical',this.basicSetting.statistical);
                        param.append('minMoney',this.basicSetting.minMoney);
                        param.append('isAutoGoods',this.basicSetting.isAutoGoods);
                        param.append('isInvoice',this.basicSetting.isInvoice);
                        param.append('invoiceContent',this.basicSetting.invoiceContent);
                        param.append('reductionInventory',this.basicSetting.reductionInventory);
                        param.append('addSales',this.basicSetting.addSales);
                        param.append('updateInvoice',this.basicSetting.updateInvoice);
                        param.append('updateGood',this.basicSetting.updateGood);
                        param.append('updateGoodInfo',this.basicSetting.updateGoodInfo);
                        param.append('updateCost',this.basicSetting.updateCost);
                        param.append('closeOrder',this.basicSetting.closeOrder);
                        param.append('cancelOrder',this.basicSetting.cancelOrder);
                        param.append('returnGoods',this.basicSetting.returnGoods);
                        param.append('returnGoodsConfirm',this.basicSetting.returnGoodsConfirm);
                        param.append('returnMoney',this.basicSetting.returnMoney);
                        param.append('upddateCurrency',this.basicSetting.upddateCurrency);
                        param.append('userAgreement',this.basicSetting.userAgreement);
                        let config = {
                            headers:{'Content-Type':'multipart/form-data'} //这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
                        };
                        this.axios.post(this.requestUrl+"save?token=11",param,config).then((response) => {
                            if(response.data.error_no == 0){
                                this.$message({
                                    type: 'success',
                                    message: response.data.error_info
                                });
                            }else{
                                this.$message({
                                    type: 'error',
                                    message: response.data.error_info
                                });
                            }
                        })


                    } else {
                        return false;
                    }
                });
            },
            submitUpload() {
                this.$refs.upload3.submit();
            },
            change(val) {
                console.log(val);
            },
            modeUpload: function(item){
                this.mode = item.file;
            },
            handleRemove(file, fileList) {
                this.fileList=[];
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
                const isLt50K = file.size /1024 < 50;
                if (!isJPG) {
                    this.$message.error('广告图片只能是 JPG和PNG 格式!');
                }
                if (!isLt50K) {
                    this.$message.error('广告图片大小不能超过 50K!');
                }
                return isJPG && isLt50K;
            },
            handlePreview(file) {
                console.log(file);
            },
            initData(){
                this.axios.get(this.requestUrl+"get?token=1").then((response) => {
                    if(response.data.error_no == 0){
                        this.basicSetting = response.data.results;
                        if(response.data.results.goodDefaultImg!="" && response.data.results.goodDefaultImg !=null){
                            this.fileList.push({name: "", url: this.imgUrl+response.data.results.goodDefaultImg});
                        }

                    }
                })
            }
        },
        mounted() {
            this.initData();
        }
    }
</script>
<style scoped>
  .parent-body{
    position: relative;
  }
  .content-header{
    position: absolute;
    top:0;
    left:0;
    width:180px !important;
    height:100%;
  }
  .return-style{
    position: absolute;
    right:10px;
  }
  .input-width{
    width:350px;
  }
  .show-info{
    font-size:12px;color:#999999;
  }
  .classify-icon{
    background:url("./../../../../assets/images/u2198.png") no-repeat;
    width:200px;
    height:50px;
    line-height: 50px;
    color:#fff;
    padding-left: 40px;
    position: absolute;
    left:-20px;
  }
  .content-tab-style{
    border:1px solid #DCDFE6;
    border-radius: 5px;
    padding-left:20px;
  }
</style>